<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Induction Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="300" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 1. Draw the Bar Magnet
    ctx.strokeRect(20, 100, 150, 50);
    ctx.fillText('N', 45, 125);
    ctx.fillText('S', 145, 125);

    // 2. Draw the Velocity Vector
    ctx.beginPath();
    ctx.moveTo(120, 70);
    ctx.lineTo(40, 70);
    // Arrowhead
    ctx.moveTo(60, 60);
    ctx.lineTo(40, 70);
    ctx.lineTo(60, 80);
    ctx.stroke();
    ctx.fillText('v', 80, 60);

    // 3. Draw the Solenoid
    // Core
    const coreX = 220;
    const coreY = 95;
    const coreWidth = 170;
    const coreHeight = 70;
    const solenoidTop = coreY;
    const solenoidBottom = coreY + coreHeight;
    const solenoidCenterY = coreY + coreHeight / 2;
    
    // Draw the core cylinder
    ctx.beginPath();
    ctx.moveTo(coreX + coreHeight/2, solenoidTop);
    ctx.lineTo(coreX + coreWidth, solenoidTop);
    ctx.moveTo(coreX + coreHeight/2, solenoidBottom);
    ctx.lineTo(coreX + coreWidth, solenoidBottom);
    ctx.stroke();
    
    // Left end cap of core
    ctx.beginPath();
    ctx.arc(coreX + coreHeight/2, solenoidCenterY, coreHeight / 2, Math.PI / 2, -Math.PI / 2);
    ctx.stroke();

    // Windings (Coil) - drawn to match the schematic style of the source image
    ctx.lineWidth = 1.5;
    const numLoops = 3;
    const loopSpacing = 35;
    const loopStartX = 265;

    // Draw the vertical wires on the front face
    for (let i = 0; i <= numLoops; i++) {
        let x = loopStartX + i * loopSpacing;
        ctx.beginPath();
        ctx.moveTo(x, solenoidTop);
        ctx.lineTo(x, solenoidBottom);
        ctx.stroke();
    }
    // Draw the wires going over the top
    for (let i = 0; i < numLoops; i++) {
        let x1 = loopStartX + i * loopSpacing;
        let x2 = x1 + loopSpacing;
        ctx.beginPath();
        ctx.moveTo(x1, solenoidTop);
        ctx.bezierCurveTo(x1, solenoidTop - 20, x2, solenoidTop - 20, x2, solenoidTop);
        ctx.stroke();
    }
    
    // 4. Draw the Resistor and Connections
    const connA_X = loopStartX;
    const connB_X = loopStartX + numLoops * loopSpacing;
    const wireStartY = solenoidBottom;
    const resistorY = 240;

    ctx.lineWidth = 2; // Reset line width
    ctx.beginPath();
    ctx.moveTo(connA_X, wireStartY);
    ctx.lineTo(connA_X, resistorY);
    ctx.moveTo(connB_X, wireStartY);
    ctx.lineTo(connB_X, resistorY);
    ctx.stroke();

    // Resistor
    const resStartX = connA_X + 15;
    const resEndX = connB_X - 15;
    const resWidth = resEndX - resStartX;
    
    ctx.beginPath();
    ctx.moveTo(connA_X, resistorY);
    ctx.lineTo(resStartX, resistorY);
    const zigZagHeight = 8;
    ctx.lineTo(resStartX + resWidth * 1/6, resistorY + zigZagHeight);
    ctx.lineTo(resStartX + resWidth * 3/6, resistorY - zigZagHeight);
    ctx.lineTo(resStartX + resWidth * 5/6, resistorY + zigZagHeight);
    ctx.lineTo(resEndX, resistorY);
    ctx.lineTo(connB_X, resistorY);
    ctx.stroke();

    // Points A and B
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(connA_X, resistorY, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(connB_X, resistorY, 4, 0, 2 * Math.PI);
    ctx.fill();
    
    // Labels
    ctx.font = '20px serif';
    ctx.fillText('R', (connA_X + connB_X) / 2, resistorY - 20);
    ctx.fillText('A', connA_X, resistorY + 25);
    ctx.fillText('B', connB_X, resistorY + 25);
</script>
</body>
</html>